<template>
    <div class="taskdetail">
        <el-drawer
            v-model="drawer"
            class="draOut"
            :with-header="false"
            :show-close="false"
            size="1000px"
            :destroy-on-close="true">
            <p class="draTitle">
                <span>【{{ drawerData.name }}】- 任务情况</span>
                <el-icon @click="close">
                    <Close />
                </el-icon>
            </p>
            <el-card shadow="never" class="sopInfo">
                <header class="header">
                    <div class="title_box">
                        <p class="text font_14">{{ drawerData.name }}</p>
                        <p v-if="props.type === 1" class="tag">{{ drawerData.trigger_range }}</p>
                        <p v-else class="tag">群SOP</p>
                    </div>
                    <p class="status_box">
                        SOP状态：<span :class="[drawerData.status == 1 ? 'start' : 'close']">{{
                            drawerData.status == 1 ? '已开启' : '已关闭'
                        }}</span>
                    </p>
                    <div class="execute_box">
                        <p class="font_14 execute">执行人：</p>
                        <div v-if="props.type === 1" class="execute_card">
                            <div
                                v-for="(item, index) in drawerData.executor_list"
                                v-show="index < 4"
                                :key="item.id"
                                class="execute_card_item">
                                <el-avatar shape="square" :size="24" :src="item.avatar" />
                                <span class="name font_14">{{ item.name }}</span>
                            </div>
                        </div>
                        <div v-else class="execute_card">
                            <div
                                v-for="(item, index) in drawerData.workuser"
                                v-show="index < 4"
                                :key="item.id"
                                class="execute_card_item">
                                <el-avatar shape="square" :size="24" :src="item.avatar" />
                                <span class="name font_14">{{ item.name }}</span>
                            </div>
                        </div>
                        <span v-if="props.type === 1 && drawerData?.executor_list.length > 4" class="font_14">
                            等{{ drawerData?.executor_list.length }}个员工
                        </span>
                        <span v-if="props.type === 2 && drawerData?.workuser.length > 4" class="font_14">
                            等{{ drawerData?.workuser.length }}个员工
                        </span>
                    </div>
                    <p class="font_14">
                        有效期：<span v-if="drawerData.validity_type != 1">
                            {{ drawerData.start_time }} ~ {{ drawerData.end_time }}
                        </span>
                        <span v-else>永久</span>
                    </p>
                </header>
            </el-card>
            <ZwTable
                ref="tableRef"
                class="table-box"
                :option="tableOption"
                :row-key="getRowKey"
                :fetch-params="state.searchParams"
                :fetch-api="fetchApi()"></ZwTable>
            <SopDrawer ref="sopDra" />
            <GroupSop ref="groupSop" />
        </el-drawer>
    </div>
</template>

<script lang="tsx" setup>
import { ref, reactive, computed } from 'vue';
import ZwTable from '@/components/zw/table/Table';
import SopDrawer from '../customerSop/components/SopDrawer.vue';
import GroupSop from '../customerBaseSop/components/SopDrawer.vue';
import { carryOut, groupSopCarryOut } from '@/api/smartMarketing/sop';
import { ElButton, ElIcon, ElPopover, ElMessage } from 'element-plus';
import { QuestionFilled } from '@element-plus/icons-vue';

const props = defineProps(['type', 'tooltip']);
const drawer = ref(false);
const sopDra: any = ref(null);
const groupSop: any = ref(null);
const drawerData = ref({
    id: 1,
    name: '',
    trigger_range: '',
    status: 1,
    executor_list: [{ name: '', avatar: '' }],
    workuser: [{ name: '', avatar: '' }],
    start_time: '',
    end_time: '',
    validity_type: 1,
    created_at: '',
    avatar: ''
});
const getRowKey = (row: any) => {
    return row.id;
};
const defaultParams = reactive({
    sop_id: drawerData.value.id
});

const state = reactive({
    // searchParams: deepCopy(defaultParams)
    searchParams: defaultParams
});
const tableOption = [
    {
        label: '序号',
        width: 80,
        render({ row, column, index }) {
            return <span>{index + 1}</span>;
        }
    },
    {
        prop: 'trigger_type_name',
        label: '触达方式',
        width: 120
    },
    {
        prop: 'title',
        label: '内容标题',
        width: 200,
        showOverflowTooltip: true
    },
    {
        prop: 'rule_name',
        label: '规则',
        width: 240,
        showOverflowTooltip: true
    },
    {
        prop: 'task_num',
        label: '任务总数',
        width: 100
    },
    {
        prop: 'complete_num',
        label: '已完成数',
        width: 100
    },
    {
        prop: 'not_complete_num',
        label: '未完成数',
        width: 100
    },
    {
        prop: 'mass_num',
        label: '执行群发数',
        width: 130,
        renderHeader({ row }) {
            const slotReference = () => (
                <ElIcon>
                    <QuestionFilled />
                </ElIcon>
            );
            const slotDefault = () => <p>{props.tooltip.mass_num.text}</p>;
            return (
                <p class="tableHeader">
                    <span>{props.tooltip.mass_num.title}</span>
                    <ElPopover
                        popper-class="popGroup"
                        trigger="hover"
                        effect="dark"
                        placement="top-start"
                        vSlots={{ reference: slotReference, default: slotDefault }}
                        width={150}></ElPopover>
                </p>
            );
        }
    },
    {
        prop: 'mass_fail_num',
        label: '执行失败数',
        width: 130,
        renderHeader({ row }) {
            const slotReference = () => (
                <ElIcon>
                    <QuestionFilled />
                </ElIcon>
            );
            const slotDefault = () => (
                <div>
                    <p>{props.tooltip.fail_num.text}</p>
                    <p vShow={props.tooltip.fail_num.text2}>{props.tooltip.fail_num?.text2}</p>
                </div>
            );
            return (
                <p class="tableHeader">
                    <span>{props.tooltip.fail_num.title}</span>
                    <ElPopover
                        popper-class="popGroup"
                        trigger="hover"
                        effect="dark"
                        placement="top-start"
                        vSlots={{ reference: slotReference, default: slotDefault }}
                        width={150}></ElPopover>
                </p>
            );
        }
    },
    {
        prop: 'private_letter_num',
        label: '员工私信完成数',
        width: 180,
        renderHeader({ row }) {
            const slotReference = () => (
                <ElIcon>
                    <QuestionFilled />
                </ElIcon>
            );
            const slotDefault = () => <span>{props.tooltip.letter_num.text}</span>;
            return (
                <p class="tableHeader">
                    <span>{props.tooltip.letter_num.title}</span>
                    <ElPopover
                        popper-class="popGroup"
                        trigger="hover"
                        effect="dark"
                        placement="top-start"
                        vSlots={{ reference: slotReference, default: slotDefault }}
                        width={150}></ElPopover>
                </p>
            );
        }
    },
    {
        // prop: 'operate',
        label: '操作',
        width: 120,
        align: 'left',
        isOperate: true,
        fixed: 'right',
        renderOperate({ row, column, index }) {
            return (
                <div>
                    <ElButton size="small" onClick={() => remind(row)}>
                        执行明细
                    </ElButton>
                </div>
            );
        }
    }
];
const fetchApi = () => {
    // 获取文件列表
    return props.type === 1 ? carryOut : groupSopCarryOut;
};

const remind = (row: any) => {
    if (props.type === 1) {
        // sopDra.value.state.searchParams.market_sop_id =
        sopDra.value.open(drawerData.value.name, row);
    } else {
        // groupSop.value.state.searchParams.market_sop_id = 460
        groupSop.value.open(drawerData.value.name, row);
    }
};

const close = () => {
    drawer.value = false;
};
defineExpose({
    drawer,
    drawerData,
    defaultParams
});
</script>

<style lang="scss" scoped>
.taskdetail {
    .draTitle {
        margin-bottom: 24px;
        padding-bottom: 20px;
        border-bottom: 1px #eaeaea solid;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .sopInfo {
        margin-bottom: 24px;

        .header {
            color: #33302d;

            .font_14 {
                font-size: 14px;
            }

            .title_box {
                display: flex;
                align-items: center;
                margin-bottom: 16px;

                .text {
                    font-size: 20px;
                    font-weight: 500;
                }

                .tag {
                    font-size: 12px;
                    color: #ff6b00;
                    padding: 4px 6px;
                    background: #fffaf9;
                    border: 1px #ffc69e solid;
                    border-radius: 2px;
                    margin-left: 8px;
                }
            }

            .status_box {
                line-height: 14px;
                font-weight: 400;
                font-size: 14px;
                margin-bottom: 16px;

                .start {
                    color: #32d1ad;
                }

                .close {
                    color: #f65157;
                }
            }

            .execute_box {
                display: flex;
                align-items: center;
                margin-bottom: 16px;

                .execute {
                    min-width: 60px;
                }

                .execute_card {
                    display: flex;
                    align-items: center;

                    &_item {
                        min-width: 152px;
                        display: flex;
                        align-items: center;
                        padding: 8px;
                        margin-right: 8px;
                        background: #fffaf9;
                        border-radius: 2px;

                        .name {
                            margin-left: 8px;
                        }
                    }
                }
            }
        }
    }

    :deep(.tableHeader) {
        display: flex;
        align-items: center;
    }
}
</style>
